<template>
  <div class="content">
    <!-- 交易密码 -->
    <div class="form" v-if="defaultIndex==1">
      <h3 class="user-title">{{$t('USER_TRADE_PASS')}}</h3>
      <zx-form-group :title="$t('PASSWORD')">
        <zx-input v-model="phoneForm.username" type="text" :place="$t('PASSWORD_ENTER')" ref="username">
        </zx-input>
      </zx-form-group>
      <zx-form-group :title="$t('CHECK_PASS')">
        <zx-input v-model="phoneForm.password" type="password" :place="$t('CHECK_PASS_PLACE')" ref="password" required>
        </zx-input>
      </zx-form-group>
      <zx-form-group>
        <input type="submit" class="submit-btn mt-20" :value="$t('NEXT_STEP')" @click="defaultIndex=2">
      </zx-form-group>
    </div>
    <!-- 重置交易密码 -->
    <div class="form" v-if="defaultIndex==2">
      <h3 class="user-title">{{$t('USER_TRADE_PASS_CHANGE')}}</h3>
      <zx-form-group :title="$t('OLD_PASS_LABEL')">
        <zx-input v-model="emailForm.email" type="text" :place="$t('OLD_PASS_PLACE')" ref="email" required>
        </zx-input>
      </zx-form-group>
      <zx-form-group :title="$t('NEW_PASS_LABEL')">
        <zx-input v-model="emailForm.password" type="password" :place="$t('NEW_PASS_PLACE')" ref="password">
        </zx-input>
      </zx-form-group>
      <zx-form-group :title="$t('CHECK_PASS')">
        <zx-input v-model="emailForm.password" type="password" :place="$t('CHECK_PASS_PLACE')" ref="password">
        </zx-input>
      </zx-form-group>
      <zx-form-group>
        <input type="submit" class="submit-btn mt-20" :value="$t('COMFIRM')">
      </zx-form-group>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      defaultIndex: 1,
      name: '',
      phoneForm: {
        username: '',
        password: ''
      },
      emailForm: {
        email: '',
        password: ''
      }
    };
  },
  methods: {
    shubmit(formName) {
      for (let item in formName) {
        if (!this.$refs[item].valid) {
          console.log(this.$refs[item].place);
          return;
        }
      }
    }
  }
};
</script>
<style scoped lang="scss">
  @import "../../assets/sass/user.scss";
</style>